@import '../../../style/theme/index.less';
@import './anim.less';

@mi-modal: ~'@{mi-prefix}modal';
@ant-modal: ant-modal;

.@{mi-modal} {
    &-wrap,
    &-mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 19900407;
        transition: all .3s;
    }

    &-mask {
        background: fade(@mi-black-color, 50%);
    }

    &-wrap {
        .flex();
        transition: all .3s;
        .properties(perspective, 1200);

        &.top {
            align-items: flex-start;
        }

        &.bottom {
            align-items: flex-end
        }

        &.left {
            justify-content: flex-start;
        }

        &.right {
            justify-content: flex-end;
        }
    }

    &-content {
        .properties(width, 520);
        background: var(--mi-sider-color, @mi-sider-color);
        color: @mi-black-color;
        .border-radius();
        border: 1px solid var(--mi-theme-color, @mi-theme-color);
        transition: all .3s;
        position: relative;
    }

    &-header {
        .flex(center, flex-start);
        color: var(--mi-modal-text-color, @mi-modal-text-color);
        .properties(padding-left, 24);
        .properties(padding-right, 24);
        .properties(padding-top, 16);
        .properties(padding-bottom, 16);
        border-bottom: 1px solid var(--mi-modal-border-inline-color, @mi-modal-border-inline-color);
        .letter-spacing();
    }

    &-body {
        .properties(padding, 24);
        .properties(font-size, 14);
        color: var(--mi-modal-content-color, @mi-modal-content-color);
        border-bottom: 1px solid var(--mi-modal-border-inline-color, @mi-modal-border-inline-color);
        .letter-spacing();
        .border-radius();
    }

    &-footer {
        .flex(center, flex-end);
        .properties(padding, 16);
        color: @mi-white-color;
        .letter-spacing();

        button {
            .properties(margin-right, 8);

            &:last-child {
                margin-right: 0;
            }

            &.@{mi-modal}-btn {
                color: var(--mi-btn-default-color, @mi-btn-default-color);
                border-color: var(--mi-btn-defaul-border-color, @mi-btn-defaul-border-color);

                &:active, &:hover, &:focus {
                    color: var(--mi-btn-default-color, @mi-btn-default-color);
                    border-color: var(--mi-btn-defaul-border-color, @mi-btn-defaul-border-color);
                }
            }

            &.@{mi-modal}-btn-primary {
                background-color: var(--mi-theme-color, @mi-theme-color);
                border-color: var(--mi-theme-color, @mi-theme-color);
                text-shadow: none;
                color: var(--mi-modal-btn-primary-color, @mi-modal-btn-primary-color);
            }
        }
    }

    &-close {
        background: transparent;
        cursor: pointer;
        outline: none;
        border: none;
        position: absolute;
        right: 0;
        top: 0;
        text-decoration: none;
        color: var(--mi-modal-text-color, @mi-modal-text-color);
        transition: all .3s;

        &-x {
            .flex();
            .properties(width, 50);
            .properties(height, 50);
        }
    }

    &-error,
    &-success,
    &-confirm,
    &-warning {
        .@{ant-modal} {
            &-content {
                .border-radius(6);
                background: var(--mi-modal-bg-color, @mi-modal-bg-color);
                border: 1px solid var(--mi-theme-color, @mi-theme-color);
                box-shadow: 0 0 10px var(--mi-modal-shadow-color, @mi-modal-shadow-color);
            }

            &-confirm {
                &-content {
                    color: var(--mi-modal-text-color, @mi-modal-text-color);
                }
            }
        }
        &.@{ant-modal} {
            &-success {
                .@{ant-modal} {
                    &-confirm-body {
                        > .anticon {
                            color: var(--mi-theme-color, @mi-theme-color);
                        }
                    }
                }
            }
        }
    }
}

.@{mi-prefix} {
    /** Slit */
    &slit-enter-active {
        animation: anim-slit .3s forwards ease-out;
    }

    &slit-leave-active {
        animation: anim-slit .3s forwards ease-out reverse;
    }

    /** Shake */
    &shake-enter-active {
        animation: anim-shake .3s forwards linear;
    }

    &shake-leave-active {
        animation: anim-shake .3s forwards linear reverse;
    }
}